<!DOCTYPE html>
<html>

<head>
    <title>妖怪手帐</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
    <!--link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"-->
    <!--link rel="stylesheet" href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css"-->
    <link rel="stylesheet" type="text/css" href="css/style.min.css" />
    <link rel="stylesheet" href="css/monster.css">
    <!--script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script-->
    <!--script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script-->
    <!--script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script-->
    <script type="text/javascript" src="js/script.min.js"></script>
    <script src="js/monster.js"></script>
    <script>
        $(function () {
            $.ajax({
                cache: true,
                success: function (json) {
                    init(json);
                },
                url: "data/data.json"
            })
        });
    </script>
</head>

<body>
    <div>
        <div id="desktop-menu">
            <div id="top-menu">
                <div class="main-nav">
                    <ul class="nav nav-tabs">
                        <li class="active">
                            <a href=".pane-monsters" data-toggle="tab">妖怪</a>
                        </li>
                        <li>
                            <a href=".pane-materials" data-toggle="tab">素材</a>
                        </li>
                        <li>
                            <a href=".pane-info" data-toggle="tab">说明</a>
                        </li>
                    </ul>
                </div>
                <div class="tab-content">
                    <div class="tab-pane pane-monsters"></div>
                    <div class="tab-pane pane-materials"></div>
                    <div class="tab-pane pane-info"></div>
                </div>
            </div>
        </div>
        <div class="tab-content">
            <div class="tab-pane pane-monsters active">
                <div>
                    <table id="monster-table" class="table table-hover table-bordered" width="100%">
                    </table>
                    <table id="monster-table-header" class="hidden">
                        <thead>
                            <tr>
                                <th>No.</th>
                                <th>妖怪</th>
                                <th>品质</th>
                                <th>元素</th>
                                <th>星</th>
                                <th>特性</th>
                                <th>力</th>
                                <th>智</th>
                                <th>魅</th>
                                <th>速</th>
                                <th>运</th>
                                <th>技</th>
                                <th>技能</th>
                                <th>进化</th>
                            </tr>
                        </thead>
                    </table>
                </div>
            </div>
            <div class="tab-pane pane-materials">
                <p>素材列表</p>
            </div>
            <div class="tab-pane pane-info">
                <h4>
                    <span class="label label-primary">说明</span>
                </h4>
                <p>本项目仅供学习使用，资源来自互联网，如有侵权请联系作者（fuwutu@qq.com）及时删除</p>
            </div>
        </div>
    </div>
</body>

</html>